<template>
	<view class="bgcolor">
		<!-- 背景图片 -->
		<view class="bg">
			<image src="/static/background/bjimage.jpg" class="img-1" mode=""></image>
		</view>
		<!-- 登录图标 -->
		<!-- // <view class="toux" open-type='getPhoneNumber' @click="toInfoPage"> -->
		<!-- <button class="toux" open-type="getPhoneNumber" @getphonenumber="toInfoPage">
			<u-avatar size="70" fontSize="13"></u-avatar>
			<text>立即登录</text>
		</button> -->
		<view class="toux" v-if="userinfo.id" open-type="getPhoneNumber" @click="touserinfo">
			<u-avatar v-if="userinfo.avatar" size="70" fontSize="13" :src="userinfo.avatar|avatarImage"></u-avatar>
			<u-avatar v-else size="70" fontSize="13" :src="defaultimage"></u-avatar>
			<text>{{userinfo.username}}</text>
		</view>
		<view v-else class="toux" open-type="getPhoneNumber" @click="toInfoPage">
			<u-avatar size="70" fontSize="13"></u-avatar>
			<text>立即登录</text>
			<!-- <img src="blob:http://192.168.197.8:8080/35727a33-5d39-4f43-905f-48c063c0dbf2" alt="" /> -->
		</view>

		<u-toast ref="uToast" />

		<!-- 优惠券服务套餐充值余额 -->
		<view class="yhfw">
			<view class="itemit" @click="gotoPage('优惠券')">
				<text>优惠券</text>
				<text>新人专享9.5折优惠券>

				</text>
			</view>
			<u-divider></u-divider>
			<view class="itemit" @click="gotoPage('服务套餐')">
				<text>服务套餐</text>
				<view class="zg">
					<text class="lj">
						最高立减75元
					</text>
					<text class="gm">
						立即购买
					</text>
					<text class="dy">></text>
				</view>

			</view>
			<u-divider></u-divider>
			<view class="itemit" @click="gotoPage('充值余额')">
				<text>充值余额</text>
				<text>充值有礼>
				</text>
			</view>
			<!-- <u-divider></u-divider>
			<view class="itemit" @click="gotoPage('联系客服')">
				<text>联系客服</text>
				<text>>
				</text>
			</view> -->
			<u-divider></u-divider>
			<view class="itemit" @click="gotoPage('添加好友')">
				<text>添加好友</text>
				<text>>
				</text>
			</view>

		</view>
		<!-- 内容 -->
		<view class="bgbody">
			<!-- 我的订单 -->
			<view class="dd">
				<!-- 订单 -->
				<view class="wdding">
					<text class="dan">我的订单</text>
					<text class="dan2" @click="gotoPage('查看全部')">查看全部＞</text>
				</view>
				<view class="qr">
					<!-- 图标之类 -->
					<!-- 	<view class="tb" @click="gotoPage('待确认')">
						<image src="/static/dd/等待.png"></image>
						<text>待确认</text>
					</view> -->
					<view class="tb" @click="gotoPage('待支付')">
						<image src="/static/dd/待支付.png"></image>
						<text>待支付</text>
					</view>
					<view class="tb" @click="gotoPage('待服务')">
						<image src="/static/dd/heart-line.png"></image>
						<text>待服务</text>
					</view>
					<view class="tb" @click="gotoPage('待评价')">
						<image src="/static/dd/五角星_空.png"></image>
						<text>待评价</text>
					</view>

					<view class="tb" @click="gotoPage('已评价')">
						<image src="/static/ls/我的评价.png"></image>
						<text>我的评价</text>
					</view>

				</view>

			</view>
			<!-- 历史记录 -->
			<view class="lis">
				<view class="lsitem" @click="gotoPage('我的购物车')">
					<image src="/static/我的购物车.png"></image>
					<text>我的购物车</text>
				</view>
				<view class="lsitem" @click="gotoPage('历史浏览')">
					<image src="/static/ls/history.png"></image>
					<text>历史浏览</text>
				</view>
				<!-- <view class="lsitem">
					<image src="/static/ls/需求.png"></image>
					<text>服务偏好</text>
				</view> -->

				<!-- <view class="lsitem" @click="gotoPage('已评价')">
					<image src="/static/ls/我的评价.png"></image>
					<text>我的评价</text>
				</view> -->
				<view class="lsitem" @click="gotoPage('退款/售后')">
					<image src="/static/dd/47退款.png"></image>
					<text>退款售后</text>
				</view>
				<view class="lsitem" @click="gotoPage('建议反馈')">
					<image src="/static/ls/建议反馈.png"></image>
					<text>建议反馈</text>
				</view>



			</view>
			<!-- 常用工具 -->
			<view class="cygj">
				<text class="cyg">常用工具</text>
				<view class="cy">
					<view class="cyitem" @click="gotoPage('任务进度')">
						<image src="/static/cytool/任务进度未.png"></image>
						<text>任务进度</text>
					</view>
					<!-- <view class="cyitem">
						<image src="/static/我的套餐.png"></image>
						<text>我的套餐</text>
					</view> -->
					<view class="cyitem" @click="gotoPage('地址管理')">
						<image src="/static/cytool/地址管理.png"></image>
						<text>地址管理</text>
					</view>
					<view class="cyitem" @click="gotoPage('我的收藏')">
						<image src="/static/cytool/我的收藏用.png"></image>
						<text>收藏关注</text>
					</view>
					<view class="cyitem" @click="gotoPage('设置')">
						<image src="/static/cytool/设置.png"></image>
						<text>设置</text>
					</view>


				</view>
			</view>

			<!-- 我的专属推荐 -->
			<view class="tj">
				<text>我的专属推荐</text>
			</view>
			<!-- 专属推荐的内容 -->
			<view style="padding:0 5px;">
				<waterFallVue v-if="waterList.length > 0" :waterList="waterList"></waterFallVue>

			</view>







			<uni-load-more :status="status"></uni-load-more>


		</view>
		<view class="empty0"></view>
		<tabbarVue></tabbarVue>
	</view>
</template>

<script lang="ts">
	import tabbarVue from '@/common/custom-tab-bar/custom-tab-bar.vue';
	import waterFallVue from '@/view/waterFall/waterFall.vue';
	import WXBizDataCrypt from "@/utils/WXBizDataCrypt.js";
	
	import {
		base_Url
	} from '../../utils/Url';
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	import {
		login
	} from '../../api/user';
	import { genTestUserSig } from '@/TUIKit/debug/GenerateTestUserSig';
	import { TUILogin } from '@tencentcloud/tui-core';
	// #ifdef APP-PLUS || H5
	import { TUIChatKit } from '../../TUIKit';

	TUIChatKit.init();
	// #endif

	let vueVersion = 2;
	// #ifdef VUE3
	vueVersion = 3;
	// #endif


	// ﻿
	export default {
		components: {
			tabbarVue,
			waterFallVue
		},
		data() {
			return {
				status: "more", //加载动画的状态
				userinfo: {},
				defaultimage: base_Url + "/upload/defaultimg.jpg",
				waterpageNo: 1,
				waterpageSize: 4,
				watertotal: 0,
				waterList: []
			}
		},
		onPullDownRefresh() {
			console.log("下拉刷新触发");
			this.watertotal = 0
			uni.reLaunch({
				url: '/pages/index/index'
			})
		},

		onReachBottom() {
			console.log("上拉触底触发");
			// this.status = "loading"
			// if (10 < 2) {


			// 	this.status = "loading"
			// } else {
			// 	this.status = "noMore"
			// }
			if (this.waterpageNo * this.waterpageSize >= this.watertotal) {

				this.status = "noMore"
				return;
			} else {
				this.status = "loading"
			}
			if (this.loading) return

			this.waterpageNo += 1
			console.log('我到地步了', this.waterpageNo)
			this.getwaterFall()
		},
		onShow() {
			// console.log('xinxi', this);

		},
		mounted() {
			this.getwaterFall()
		},
		filters: {
			avatarImage(e) {
				// console.log('头像', JSON.parse(e));
				try {
					return JSON.parse(e).url
					// return true
				} catch (error) {
					// return false
					return e
				}
			}
		},

		onLoad() {
			// console.log('ss', this.userInfo);
			// console.log('xianshi ');
			const aa = uni.getStorageSync("userinfo")
			if (aa) {
				this.userinfo = {
					...JSON.parse(aa)
				}
				const aa1 = genTestUserSig({ SDKAppID: 1600084628, secretKey: "be7e8cc168feb00b6c562b4ef8c46ccfea630bd3325d8cad87e351ddd778a165", userID: this.userinfo.username })
				console.log('信息', aa1);
				TUILogin.login({
					SDKAppID: 1600084628,
					userID: this.userinfo.username,
					userSig: aa1.userSig,
					useUploadPlugin: true, // If you need to send rich media messages, please set to true.
					framework: `vue${vueVersion}` // framework used vue2 / vue3
				}).then(res => {
					console.log("xiao洗", res);
					let chat = TencentCloudChat.create({
						SDKAppID: 1600084628
					}); // SDK 实例通常用 chat 表示
					
					chat.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
					console.log("xx", chat.getTotalUnreadMessageCount());
					uni.setStorageSync("isReady", true)
				}).catch(() => { });
			} else {
				this.userinfo = {}
			}
		},

		computed: {


		},


		onShow() {
			//调用该方法


			// console.log('xianshi ');
			const aa = uni.getStorageSync("userinfo")
			if (aa) {
				this.userinfo = {
					...JSON.parse(aa)
				}
			} else {
				this.userinfo = {}
			}

			this.$store.commit("changeTabbarIndex", 3)
		},

		methods: {

			...mapActions(['Login', 'GetuserInfo']),
			getwaterFall() {
				// this.$http.post("/serviceClassification/page", {
				this.$http.post("/servicedetails/page", {
					pageNo: this.waterpageNo,
					pageSize: this.waterpageSize,
					params: {
						serviceName: "",
						specification: [],
					}
				}).then(res => {
					console.log("瀑布信息", res);
					this.watertotal = res.result.total
					this.waterList = [...this.waterList, ...res.result.records]
					console.log("信息232", this.waterList);
				})
			},
			show() {

				this.$refs.uToast.show({
					message: '登录成功',
					type: 'success'
				})
			},
			toInfoPage() {
				const that = this
				const {
					Login,
					GetuserInfo
				} = this
				uni.showLoading({
					title: '加载中'
				});
				uni.login({
					timeout: 8000,
					provider: 'weixin',
					success: function (loginRes) {
						console.log('微信登录凭证：', loginRes.code);
						uni.setStorageSync('code', loginRes.code)

						Login(loginRes.code).then(res => {
							console.log('xinxi2', res);
							// that.show()
							uni.$showMsg("登录成功");
							uni.hideLoading();
							// console.log('dengl',uni);
							// console.log('that', that);
							// console.log('this', that.$store.user.userinfo);

							GetuserInfo().then(userDetails => {
								console.log('用户', userDetails);
								that.userinfo = userDetails;


								// // that.$set(that.userinfo, 'username',
								// '李白'); // Update the username
								// that.$set(that.userinfo, 'id', '1001'); // Update the username
							})
							console.log('this', that.userinfo);

						})


					},
					fail: (err) => {
						uni.hideLoading();
						console.error('登录失败：', err);
					}
				});
				// uni.navigateTo({
				// 	url:"/view/InformationSettings/InformationSettings?id="+1,

				// })
				// this.$toPage("/view/InformationSettings/InformationSettings", "id", 1)
			},
			touserinfo() {
				this.$toPage("/view/InformationSettings/InformationSettings")
			},
			gotoPage(e) {
				//还可以将这个函数进行封住参考topagejs
				if (e == "设置") {
					// uni.navigateTo({
					// 	url:"/view/setUp/setUp",

					// })
					this.$toPage("/view/setUp/setUp")
				}
				// if (e == "联系客服") {
				// 	// uni.navigateTo({
				// 	// 	url:"/view/setUp/setUp",

				// 	// })
				// 	// this.$toPage("/TUIKit/components/TUIContact/index")
				// }
				if (e == "添加好友") {
					// uni.navigateTo({
					// 	url:"/view/setUp/setUp",

					// })
					this.$toPage("/TUIKit/components/TUIContact/index")
				}
				if (e == "优惠券") {
					this.$toPage("/view/coupon/coupon")
				}
				if (e == "服务套餐") {
					this.$toPage("/otherPage/servicePackage/servicePackage")
				}
				if (e == "充值余额") {
					this.$toPage("/view/rechargeBalance/rechargeBalance")
				}
				if (e == "查看全部") {
					this.$toPage("/otherPage/myOrder/myOrder", "index", 0)
				}
				// if (e == "待确认") {
				// 	this.$toPage("/otherPage/myOrder/myOrder", "index", 1)
				// }
				if (e == "待支付") {
					this.$toPage("/otherPage/myOrder/myOrder", "index", 1)
				}
				if (e == "待服务") {
					this.$toPage("/otherPage/myOrder/myOrder", "index", 2)
				}
				if (e == "待评价") {
					this.$toPage("/otherPage/myOrder/myOrder", "index", 3)
				}
				if (e == "已评价") {
					this.$toPage("/otherPage/myOrder/myOrder", "index", 4)
				}
				if (e == "退款/售后") {
					this.$toPage("/components/refund/refund")
					// console.log("退款或者售后");
				}
				if (e == "我的购物车") {
					this.$toPage("/otherPage/myCart/myCart")
					// console.log("退款或者售后");
				}
				if (e == "地址管理") {
					this.$toPage("/otherPage/address/address")
					// console.log("退款或者售后");
				}
				if (e == "我的收藏") {
					this.$toPage("/components/keep/keep")
					// console.log("退款或者售后");
				}
				if (e == "任务进度") {
					this.$toPage("/components/taskProgress/taskProgress")
					// console.log("退款或者售后");
				}
				if (e == "建议反馈") {
					this.$toPage("/components/feedback/feedback")
					// console.log("退款或者售后");
				}
				if (e == "历史浏览") {
					this.$toPage("/components/historicalBrowsing/historicalBrowsing")
					// console.log("退款或者售后");
				}

			}

		}
	}
</script>

<style lang="less">
	.bgcolor {

		// background-color: #e7e7e7;
		.bg {
			position: relative;


			.img-1 {
				position: absolute;
				top: 0;
				width: 100%;
				z-index: -1;
				height: 200px;
				object-fit: cover;
				// 图片变模糊
				filter: blur(50px);
			}
		}

		.toux {
			background-color: transparent;
			border: none;
			/* 去掉边框 */
			// padding: 0;
			/* 去掉内边距 */
			// background: none;
			/* 去掉背景 */
			// font: inherit;
			/* 继承字体 */
			margin-bottom: 8px;
			padding-left: 8px;
			margin-top: 50px;
			display: flex;
			align-items: center;

			text {
				margin-left: 8px;
			}
		}

		.yhfw {
			background-color: #ffffff;
			border-radius: 7px;
			margin: 7px;

			.itemit {
				padding: 10px;
				display: flex;
				justify-content: space-between;

				.zg {
					background-color: aquamarine;
					width: 168px;
					height: 25px;
					font-size: 14px;
					background-color: #e4f8f6;
					display: flex;
					justify-content: space-evenly;
					align-items: center;

					.lj {

						background-color: #e4f8f6;
						color: #4ad6c3;
						border-radius: 3px;
					}

					.gm {
						padding: 2px;
						line-height: 28px;
						height: 25px;
						margin-left: 5px;
						background-color: #4ad6c3;
						color: #e4f8f6;
						border-radius: 3px;
					}

					.dy {
						height: 25px;
						line-height: 28px;
						background-color: #ffffff;
					}
				}
			}
		}

		.bgbody {
			background-color: #ececec;
			height: 100%;
			padding-top: 2px;

			.dd {



				margin-top: 5px;
				background-color: #ffffff;
				border-radius: 8px;
				margin-left: 4px;
				margin-right: 5px;

				.wdding {
					display: flex;
					justify-content: space-between;
					padding: 5px 10px;

					.dan {
						font-size: 16px;
						font-weight: bold;
					}

					.dan2 {
						font-size: 12px;
					}
				}

				.qr {
					margin-top: 5px;

					display: flex;
					justify-content: space-around;

					.tb {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						image {
							width: 25px;
							height: 25px;
						}

						text {
							padding-bottom: 5px;
							font-size: 14px;
						}
					}
				}
			}

			// 历史记录
			.lis {
				background-color: #ffffff;
				height: 70px;
				display: flex;
				justify-content: space-around;
				border-radius: 8px;
				margin: 6px 5px;

				.lsitem {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					image {
						width: 25px;
						height: 25px;
					}

					text {
						margin-top: 4px;
						padding-bottom: 5px;
						font-size: 14px;
					}
				}
			}

			// 常用工具
			.cygj {
				.cyg {
					margin-top: 8px;
					margin-left: 5px;
					margin-bottom: 4px;
					font-weight: bold;
				}

				.cy {
					background-color: #ffffff;
					height: 70px;
					display: flex;
					justify-content: space-around;
					border-radius: 8px;
					margin: 8px 5px;

					.cyitem {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						image {
							width: 25px;
							height: 25px;
						}

						text {
							margin-top: 4px;
							padding-bottom: 5px;
							font-size: 14px;
						}
					}

				}
			}




			// 专属推荐
			.tj {
				margin-top: 8px;
				margin-left: 5px;
				margin-bottom: 4px;
				font-weight: bold;
			}






		}


	}

	.empty0 {
		height: 48px;

	}
</style>